<template>
  <div class="product-detail-container">
    <!-- 左侧商品图片区域 -->
    <div class="product-image">
      <el-image
        :src="product.mainImageUrl"
        :preview-src-list="[product.mainImageUrl]"
        style="width: 250px; height: 250px; object-fit: contain;">
      </el-image>
      <br>

      <br>
      <div class="bottom-images">
        <el-image
          v-for="(url, index) in product.urlList"
          :key="index"
          :src="url"
          :preview-src-list="[url]"
          class="image-item"
          style="width: 50px; height: 50px; object-fit: contain; display: inline-block;"
        ></el-image>
      </div>
      <el-tag
        v-if="product.status === 1"
        type="success"
        effect="light"
        class="status-tag">
        在售
      </el-tag>
      <el-tag
        v-else
        type="danger"
        effect="light"
        class="status-tag">
        下架
      </el-tag>
      <br>
      <div v-html="product.overview"></div>

    </div>

    <!-- 右侧商品信息区域 -->
    <div class="product-info">
      <!-- 商品名称 -->
      <h2 class="product-name">{{ product.productName }}</h2>

      <!-- 价格信息 -->
      <div class="price-info">
        <span class="current-price">¥{{ product.price }}</span>
        <!--        <span v-if="product.costPrice" class="cost-price">-->
        <!--          成本价：¥{{ product.costPrice }}-->
        <!--        </span>-->
      </div>

      <!-- 库存与销量 -->
      <div class="stock-info">
        <el-tag type="warning" effect="light">
          库存：{{ product.stockQuantity }} 件
        </el-tag>
        <span class="sale-count">
          累计销量：{{ product.saleCount || 0 }} 件
        </span>
      </div>

      <!-- 商品属性 -->
      <el-descriptions class="attributes-list" :column="2">
        <el-descriptions-item label="品牌">
          {{ product.brand }}
        </el-descriptions-item>
        <el-descriptions-item label="分类">
          {{ product.categoryName }}
        </el-descriptions-item>
        <el-descriptions-item label="产地">
          {{ product.originCountry }}
        </el-descriptions-item>
        <el-descriptions-item label="SKU">
          {{ product.skuCode }}
        </el-descriptions-item>
        <el-descriptions-item label="重量">
          {{ product.weight }} kg
        </el-descriptions-item>
        <el-descriptions-item label="尺寸">
          {{ product.dimensions }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 标签云 -->
      <div class="tags-container">
        <span class="tag" v-for="tag in product.tags.split(',')" :key="tag">
          {{ tag }}
        </span>
        <div class="button-group">
          <el-button
            type="primary"
            size="medium"
            @click="buyNow"
            :disabled="product.stockQuantity <= 0"
          >
            立即购买
          </el-button>
          <el-button
            type="success"
            size="medium"
            @click="addToCart"
            :disabled="product.stockQuantity <= 0"
          >
            加入购物车
          </el-button>
        </div>
      </div>

      <!-- 详细描述 -->
      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="商品详情" name="description">
          <div v-html="product.description"></div>
        </el-tab-pane>
        <el-tab-pane label="规格参数" name="attributes">
          <pre>{{ formatAttributes(product.attributes) }}</pre>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="others">
          <el-descriptions :column="1">
            <el-descriptions-item label="创建时间">
              {{ product.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ product.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              {{ product.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>

import {getInfo} from "@/api/list/products";

export default {
  name: "info",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      activeTab: 'description',
      product: {},
      imageList: [
        //   'http://127.0.0.1:9000/juhui-test/2025/05/30/19fd02dc-e5b1-4567-91c3-3f2e134e738f.png',
        //   'http://127.0.0.1:9000/juhui-test/2025/05/30/19fd02dc-e5b1-4567-91c3-7f2e134e738f.png',
        //   'http://127.0.0.1:9000/juhui-test/2025/05/30/19fd02dc-e5b1-4567-91c3-3f25456e738f.png'
      ]
    }
  },
  watch: {
    id(newId, oldId) {
      if (newId !== oldId) {
        console.log(`id prop changed: ${oldId} -> ${newId}`);  // 打印变化日志
        this.info(); // 当 id prop 变化时调用 info 方法
      }
    }
  },
  methods: {
    info() {
      getInfo(this.id).then(response => {
        // 处理响应数据
        this.product = response.data;
      })
        .catch(error => {
          // 处理错误
          console.error('请求失败:', error);
        });
    },
    // 格式化属性字符串为JSON
    formatAttributes(attrStr) {
      if (!attrStr) return '';
      if (typeof attrStr === 'object') return JSON.stringify(attrStr, null, 2);

      try {
        const parsed = JSON.parse(attrStr);
        return JSON.stringify(parsed, null, 2);
      } catch (e) {
        // 处理非 JSON 字符串，手动做点换行处理：
        // 给每个 '], ' 后面加换行
        return attrStr.replace(/\],\s*/g, '],\n');
      }
    }
  },
  mounted() {
    this.info();
  },
}
</script>
<style scoped lang="scss">
.product-detail-container {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.product-image {
  position: relative;
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中所有内容 */
}

.bottom-images {
  display: flex;
  justify-content: center; /* 让图片横向居中 */
  flex-wrap: wrap; /* 换行支持 */
  gap: 8px;
}

.product-info {
  width: 50%;
}

.product-name {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 500;
}

.price-info {
  font-size: 28px;
  color: #f5222d;
  margin-bottom: 20px;
}

.current-price {
  font-weight: bold;
}

.cost-price {
  font-size: 14px;
  color: #666;
  margin-left: 20px;
  text-decoration: line-through;
}

.stock-info {
  margin-bottom: 25px;
  font-size: 16px;
  color: #666;
}

.attributes-list {
  margin: 20px 0;
}

.tags-container {
  margin: 20px 0;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #f0f2f5;
  border-radius: 18px;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-tabs {
  margin-top: 30px;
}

.status-tag {
  position: absolute;
  top: -12px;
  left: -12px;
  font-weight: 500;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .product-detail-container {
    flex-direction: column;
    align-items: center;
  }

  .product-image,
  .product-info {
    width: 100%;
    max-width: 4500px;
  }

  .product-image {
    margin-bottom: 30px;
  }
}

.image-item {
  margin-left: 10px; /* 所有图片左侧添加边距 */
}

.image-item:first-child {
  margin-left: 0; /* 第一个元素重置左边距，由容器的内边距控制 */
}

/* 容器添加内边距 */
:deep(.el-image-group) {
  padding: 0 8px;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>
